
<template>
    <div>
      <div id="head">
        <b>无阻商城 欢迎您登录</b>
      </div>
      <div class="tip">
        <i class="el-icon-warning"></i><span>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a href="#">《无阻隐私政策》</a>已上线，将更有利于保护您的个人隐私。</span>
      </div>
      <div id="main">
        <div id="form">
          <div class="tip"><i class="el-icon-warning"></i><span>无阻不会以任何理由要求您转账汇款，谨防诈骗。</span></div>
          <div id="login1"><span @click="ma()" ref="l1">扫码登录</span></div>|
          <div id="login2"><span @click="user()" ref="l2">账户登录</span></div>
          <div>
            <div class="lo2" ref="lo2">
              <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                  <el-form-item label="账号" prop="username">
                      <el-input v-model="form.username" ></el-input>
                  </el-form-item>

                  <el-form-item label="密码" prop="password">
                  <el-input v-model="form.password" type="password"></el-input>
                  </el-form-item>

                <!--<el-form-item label="手机号" prop="phone" style="width: 200px">-->
                  <!--<el-input v-model="form.phone" type="text"></el-input>-->
                <!--</el-form-item>-->
<!--                <el-button @click="getValid" style="width: 100px">获取验证码</el-button>
                <el-form-item label="验证码" prop="valid" style="width: 200px">
                  <el-input v-model="valid2" type="text"></el-input>
                </el-form-item>-->
                  <div id="wMa">
                    <span><a href="javascript:void (0)" @click="wMa">忘记密码?</a></span>
                  </div>
                <el-form-item>
                  <el-button type="primary" @click="submit">登录</el-button>
                </el-form-item>
                <!--<span style="font-size: 12px;color: red">{{error}}</span>-->
              </el-form>
            </div>
            <div class="lo1" ref="lo1">
              <div id="ewm">

              </div>
              <div id="sao"></div>
            </div>
          </div>
          <div id="foot">
            <ul id="f1">
              <li><a href="#">qq</a>&nbsp;&nbsp;&nbsp;</li>
              <li><a href="#">weChat</a></li>
            </ul>

            <ul>
              <li id="f2"><a href="#/register"><i class="el-icon-arrow-right"></i>立即注册</a></li>
            </ul>
          </div>
        </div>
      </div>

      <div id="bottom">
        <div id="b1">
          <ul>
          <li><a href="javascript:void (0)">关于我们</a></li>
          <li><a href="javascript:void (0)">联系我们</a></li>
          <li><a href="javascript:void (0)">人才招聘</a></li>
          <li><a href="javascript:void (0)">商家入驻</a></li>
          <li><a href="javascript:void (0)">广告服务</a></li>
          <li><a href="javascript:void (0)">手机京东</a></li>
          <li><a href="javascript:void (0)">友情链接</a></li>
          <li><a href="javascript:void (0)">销售联盟</a></li>
          <li><a href="javascript:void (0)">无阻社区</a></li>
          <li><a href="javascript:void (0)">无阻公益</a></li>
          <li><a href="javascript:void (0)">English Site</a></li>
        </ul>
        </div>
        <div id="b2">
          <span>Copyright © 2004-2021  无阻WZ.com 版权所有</span>
        </div>
      </div>
    </div>

</template>

<script>
    export default {
        name: "Login",
        data(){
          return{
            error:'',
            flag:false,
            valid:'',
            valid2:'',
            form:{
              username:'',
              password: '',
              phone:'',
            },
            rules:{
              username:[
                { required:true, message: '请输入账户', trigger: 'blur' },
                { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
              ],
              password: [
                { required:true, message: '请输入密码', trigger: 'blur' },
                { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' },
              ],
              // phone:[
              //   {required:true, trigger: 'blur'}
              // ],

            }
          }
        },
        methods:{
          ma(){
            this.flag = true;
            this.$refs.l1.style.color='red';
            this.$refs.l1.style.fontWeight='bolder';

            this.$refs.l2.style.color='black';
            this.$refs.l2.style.fontWeight='normal';

            this.$refs.lo1.style.display='block';
            this.$refs.lo2.style.display='none';
          },
          user(){
            this.flag = false;
            this.$refs.l2.style.color='red';
            this.$refs.l2.style.fontWeight='bolder';
            this.$refs.l1.style.color='black';
            this.$refs.l1.style.fontWeight='normal';

            this.$refs.lo2.style.display='block';
            this.$refs.lo1.style.display='none';

          },
          //登录
          submit(){
            this.$refs.form.validate(valid=>{

              if (valid){
                this.$axios.post('/consumer/login',JSON.stringify(this.form))
                  .then(resp=>{
                    const data = resp.data;
                    if (data.code ==='success'){
                      sessionStorage.setItem("user",JSON.stringify(data.data));
                      // this.$store.dispatch('login',resp.data);
                      this.$router.push('/');
                      this.$message.success(data.message)
                    }else {

                      this.$message.error(data.message)
                    }
                  })
              }


            });


          },
          wMa(){
            alert(1)
          },
          getValid(){
            this.$axios.get('/ValidServlet/getValid?phone='+this.form.phone)
              .then(resp=>{
                this.valid = resp.data;
              })
          }
        },
    }
</script>

<style scoped>

  #head{
    height: 110px;
    background-color: white;
    background-image: url("../../../static/img/regist/logo.png");
    background-repeat: no-repeat;
    background-position: 130px;
  }
  #head span{
    float: right;
  }
  #head b{
    position: absolute;
    left: 230px;
    top: 32px;
    font-size: 40px;
  }
  .tip{
    background-color: #fff8f0;
    padding: 10px 0;
    font-size: 12px;
    color: #999;
  }
  #main{
    height: 475px;
    background: url("../../../static/img/regist/main.jpg") 0 0 no-repeat;
    background-color: #B7E7C1;
  }
  #form{
    position: relative;
    left: 780px;
    top: 10px;
    width: 346px;
    background-color: white;
  }
  #login1,#login2{
    color: #666666;
    width: 168px;
    height: 54px;
    display: inline-block;
    font-size: 18px;
    line-height: 54px;
    border-bottom: 1px solid silver;
    margin-bottom: 35px;
  }
  #login1,#login2 span:hover{
    cursor: pointer;
  }
  .lo2{
    display: none;
  }
  #wMa{
    text-align: right;
  }
  #foot{
    height: 50px;
    background-color: #fcfcfc;
    line-height: 50px;
  }
  #f1 li{
    float: left;
    font-size: 12px;
  }
  #f2 {
    float: right;
  }
  #f1,#f2 li{
    margin: 0 5px;
  }
  #ewm{
    width: 173px;
    height: 165px;
    background-color: aquamarine;
    margin: 0 auto;
    margin-bottom: 20px;
  }
  #bottom{
    margin-top: 20px;
    height: 102px;
  }
  #b1{
    height: 20px;
  }
  #b1 ul{
    margin-left: 200px;
  }
  #b1 li{
    float: left;
    padding: 0 10px;
    border-right: 1px solid silver;
    font-size: 12px;
    color: #666666;
  }
  #b1 ul :last-child{
    border-right: none;
  }
  #b2{
    margin-top: 10px;
      font-size: 12px;
    color: #666666;

  }
  #sao{
    margin-bottom: 15px;
    height: 70px;
    background: url("../../../static/img/regist/sao.png") 0 0 no-repeat;
  }
</style>
